<template>
  <el-space class="base-table" direction="vertical">
    <el-table :data="state.list">
      <slot></slot>

      <el-table-column fixed="right" min-width="100px" label="操作">
        <template #default="{ row }">
          <el-button link type="primary" size="small" @click="changeInfo(row)"
            >编辑</el-button
          >
          <el-button link type="primary" size="small" @click="clickDelete(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <myPager
      :page-size="state.pagination.size"
      :total="state.pagination.total"
      @change-page="refresh"
      v-model:page="query.page"
    ></myPager>
  </el-space>
</template>

<script lang="ts" setup>
import myAxios from "@/utils/myAxios"
import myPager from "./myPager.vue"
import { reactive } from "vue"

defineOptions({
  name: "BaseTable"
})

const props = defineProps<{
  // 接口地址
  apiUrl: string
}>()

// 自定义事件,点击列表的删除以及编辑
const emits = defineEmits(["changeInfo", "clickDelete"])

const query = reactive({
  page: 1,
  size: 2
})

const state = reactive({
  list: [],
  pagination: {
    page: 1,
    size: 10,
    total: 1
  }
})

// 将内部方法和表格数据暴露出去
defineExpose({
  state,
  refresh
})

refresh()

async function refresh(page = 1) {
  query.page = page
  const data: any = await myAxios({
    url: props.apiUrl,
    method: "POST",
    data: query
  })
  state.list = data.list
  state.pagination = data.pagination
}

// 编辑删除方法
function changeInfo(row: any) {
  emits("changeInfo", row)
}

function clickDelete(row: any) {
  emits("clickDelete", row)
}
</script>

<style lang="scss" scoped>
.base-table {
  display: block;
}
</style>
